<template>
	<view>
		<view v-if="showStore == true" class="flex space alcenter mb30">
			<view class="flex alcenter">
				<image class="unio2o-store-logo" :src="''"></image>
				<view  class="ml20 ft16 text-default">
					卡夫卡少儿艺术培训…
				</view>
			</view>
			<view class="ft14 text-notice">
				<text>距我</text>
				<text class="text-theme">1.2km</text>
			</view>
		</view>
		<view  class="unio2o-integral-coupon-item  box-shadow bdr16 bg-w pd30">
				<image class="type" :src="''"></image>
				<view class="exchange-tag-coupon">剩余20</view>
				<navigator url="/pages/exchange/detail/coupon">
				<view class=" flex space">
					
					<view class="flex space alcenter main">
						<view class="text-theme text-center w50">
							<text class="ft14">￥</text>
							<text class="ft24 ftw600">50</text>
						</view>
						<view class="ml40" style="width: calc(100% - 140rpx);">
							<view class="ft16 ftw600">50元全店通用优惠券</view>
							<view class="mt20 ft14 text-notice">
								商家自营券
							</view>
							<view class="ft14 text-notice mt20">
								满100可用
							</view>
						</view>
					</view>		
				</view>
				<view class="line mt30 mb30"></view>
				
				<view class="flex space alcenter">
					<view class="flex alcenter">
						<image class="wh20" :src="'icon_diamond'"></image>
						<text class="ft14 ftw600 text-theme ml10">1000 + ¥15</text>
						<text class="ml20 text-line ft14 text-notice">¥1299</text>
					</view>
					<view class="exchange-btn-coupon flex center alcenter  ft14 ftw600 text-w">
						立即兑换
					</view>
				</view>
			
				</navigator>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			
			showStore:{
				type:Boolean,
				default:true
			}
		},
		computed:{
			couponBg(){
				return 'background:url('+ '#FF6B6B' +') no-repeat;background-size:100% 100%;';
			}
		},
		data(){
			return {
				
			}
		}
	}
</script>

<style>
	
	.exchange-btn-coupon{
		width:160rpx;
		height:64rpx;
		background:rgba(255,109,0,1);
		box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
		border-radius:32rpx;
	}
	.unio2o-integral-coupon-item{
		position: relative;
		overflow: hidden;
	}
	.unio2o-integral-coupon-item .type{
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		left: 0;
		top: 0;
	}
	.exchange-tag-coupon{
		height:40rpx;
		background:rgba(0,0,0,.5);
		border-radius:0rpx 0rpx 0rpx 10px;
		padding: 0 20rpx;
		font-size: 24rpx;
		color:#FFFFFF;
		position: absolute;
		right: 0;
		top: 0;
		line-height: 40rpx;
	}
	.unio2o-integral-coupon-item .main{
		height: 172rpx;
		width: 100%;
	}
	.unio2o-integral-coupon-item .btn{
		width:160rpx;
		height:64rpx;
		background:#FF6D00;
		box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
		border-radius:32rpx;
		line-height: 64rpx;
	}
</style>